<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <MenuItem name="1">
            <Icon type="ios-paper"/>
            {{ project_name }}
          </MenuItem>
        </Menu>
      </Header>
      <Content :style="{padding: '0 50px'}">
        <Breadcrumb :style="{margin: '20px 0'}">
          <BreadcrumbItem>下载</BreadcrumbItem>
        </Breadcrumb>
        <Card>
          <Row type="flex" justify="center" align="middle">
            <Col v-for="item in platforms":key="item.name">
              <Col :name="item.name">
                <Row type="flex" justify="center" align="middle">
                  <Col>
                    <h1>{{item.name}}</h1>
                  </Col>
                </Row>
                <Row type="flex" justify="center" align="middle">
                  <Col>
                    <h1><a :href="item.download_url">{{item.button_name}}</a></h1>
                  </Col>
                </Row>
                <Row type="flex" justify="center" align="middle">
                  <Col>
                    <img :src="item['base64']" :style="{width:'330px',height:'330px'}"/>
                  </Col>
                </Row>
              </Col>
            </Col>
          </Row>
        </Card>
      </Content>
      <Footer class="layout-footer-center">
        <Row type="flex" justify="center" align="middle">
          <Col>
            <span>Copyright ©2017 金力软件版权所有 ICP号：鄂14002000</span>
          </Col>
        </Row>
      </Footer>
    </Layout>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  import {getJson} from "../../const";

  export default {
    data() {
      return {
        project_name: '',
        platforms: [],
      }
    },
    methods: {},
    beforeCreate() {
      getJson(this.$route.params.id).then(v => {
        v.platforms.forEach((value, i) => QRCode.toDataURL(value.download_url).then(code => value['base64'] = code));
        Object.assign(this, v);
      }).catch(e => {
        this.$router.push({path: '/error'})
      })
    },
    updated() {
    }
  }
</script>

<style scoped>

</style>
